/*
* @Author: zhaoyong
* @Date:   2017-11-18 14:19:44
* @Last Modified by:   zhaoyong
* @Last Modified time: 2017-11-19 15:41:44
*/

import React, { Component } from 'react';
import styles from './index.less';
import CSSModules from 'react-css-modules';
import { Route, Link } from 'react-router-dom';
import PageHeader from 'ant-design-pro/lib/PageHeader';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import { Button, Dropdown, Avatar, Tag, Row, Col } from 'antd';
import UserList from './userList';
import UserDetail from './UserDetail';

const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: '',
      workOrderId: '',
    };
  }

  componentDidMount() {
    const { pathname } = this.props.location;
    this.setNavState(pathname);
  }
  componentWillReceiveProps(nextProps) {
    const { pathname } = nextProps.location;
    if (pathname !== this.props.location.pathname) {
      this.setNavState(pathname);
    }
  }

  setNavState = pathname => {
    const pathList = pathname.split('/');
    this.setState({
      userId: pathList[3],
      workOrderId: pathList[5],
    });
  };

  getHeaderMsg = () => {
    let breadcrumbList, title, action, description, tabList;
    const { userId, workOrderId } = this.state;

    if (userId) {
      title = '详情页';
      breadcrumbList = [
        {
          title: '用户页',
          href: '/user',
        },
        {
          title: '详情页',
        },
      ];
      action = (
        <div>
          <ButtonGroup>
            <Button>加入分组</Button>
            <Button>封禁</Button>
          </ButtonGroup>
        </div>
      );
      description = (
        <div className={styles.pageHeaderContent}>
          <div className={styles.avatar}>
            <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" />
          </div>
          <div className={styles.userContent}>
            <p className={styles.contentTitle}>用户名</p>
            <p>注册时间: 2011-11-22</p>
          </div>
          <div className={styles.userTagsContent}>
            <span>
              <Tag>Ant Design</Tag>
              <Tag>设计语言</Tag>
              <Tag>蚂蚁金服</Tag>
            </span>
          </div>
        </div>
      );
      tabList = [
        {
          key: 'article',
          tab: '文章',
        },
        {
          key: 'comment',
          tab: '评论',
        },
        {
          key: 'vote',
          tab: '投票',
        },
      ];
    } else {
      title = '用户页';
      breadcrumbList = [
        {
          title: '用户页',
        },
      ];
      action = '';
      description = '', tabList = null;
    }
    return {
      title,
      breadcrumbList,
      action,
      description,
      tabList,
    };
  };

  // tab改变时触发
  handleTabChange = (key) => {
    console.log(key);
  }

  getPageHeader = () => {
    const {
      title,
      breadcrumbList,
      action,
      description,
      tabList,
    } = this.getHeaderMsg();

    return (
      <PageHeader
        title={title}
        action={action}
        content={description}
        breadcrumbList={breadcrumbList}
        linkElement={Link}
        tabList={tabList}
        onTabChange={this.handleTabChange}
        className={styles.pageHeader}
      />
    );
  };
  render() {
    const { match } = this.props;
    return (
      <div className={styles['home-wrap']}>
        {this.getPageHeader()}
        <Route path={`${match.path}`} exact component={UserList} />
        <Route
          exact
          path={`${match.path}/userDetail/:userId`}
          component={UserDetail}
        />
      </div>
    );
  }
}

export default CSSModules(Home, styles);
